<template>
  <div class="footer-wrap">
    <van-tabbar :placeholder="true">
      <van-tabbar-item v-for="(item, index) in footerArr"
        :key="index" 
        :class="{active: curRoute.search(item.url) !== -1  }" 
        active-color="#0190fe"
        inactive-color="#999"
        @click="toFooter(item)"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <i class="iconfont " :class="curRoute.search(item.url) !== -1?'heartBeatIcon '+item.iconfont:item.iconfont"></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from "vuex";  //vuex得各个方法   mapGetters放在computed里面 之后可以在当前页面用 this.userInfo 使用这个全局变量
export default {
  name: "footerTab",
  data() {
    return{
      curRoute:'',
      footerArr:[
        {
          title: "首页",
          url: `/home`,
          iconfont: "icon-shouye",
        },
        {
          title: "分类",
          url: `/cate`,
          iconfont: "icon-fenlei",
        },
        {
          title: "活动",
          url: `/active`,
          iconfont: "icon-huodong",
        },
        {
          title: "养生",
          url: `/health`,
          iconfont: "icon-yangsheng1",
        },
        {
          title: "我的",
          url: `/my`,
          iconfont: "icon-yonghu",
        },
      ]
    }
  },
  components: {
  },
  created(){
    this.curRoute= this.$router.history.current.fullPath;
    console.log(this.footerArr,this.curRoute,'footerArrfooterArr')
  },
  methods: {
    ...mapMutations({               //set 设置vuex变量得值  也可以用this.$store.commit('setToken','as')  这样设置 setToken需在store/index.js mutations里得定义
      setUserInfo: "setUserInfo",   //设置用户信息
    }),
    submitForm(formName) {
    },
    toFooter(e){
      this.$router.push({path:`${e.url}`})
    }
  },
};
</script>

<style lang="scss" scoped>
.footer-wrap{
  ::v-deep {
    .van-tabbar-item--active {
      color: #646566;
    }
    .active{
      color: #1890ff;
    }
    .iconfont{
      display: block;
      margin: 0.04rem 0;
    }
  }
}
</style>